<template>
    <div class="login_wrap">
        <div class="form_wrap">
            <el-form ref="formRef" :model="loginData" class="demo-dynamic">
                <div class="content">
                    <h1>账号登录</h1>
                    <h3 class="first-login">
                        首次登录<a href="../pages/register.vue">注册新账号？</a>
                    </h3>
                    <h3>账号</h3>
                    <el-form-item prop="username" label="" :rules="[
                        {
                            required: true,
                            message: '此项为必填项',
                            trigger: 'blur',
                        },
                    ]">
                        <el-input v-model="loginData.username" />
                    </el-form-item>
                    <h3>密码</h3>
                    <el-form-item prop="password" label="" :rules="[
                        {
                            required: true,
                            message: '此项为必填项',
                            trigger: 'blur',
                        },
                    ]">
                        <el-input type="password" v-model="loginData.password" />
                    </el-form-item>
                    <h3><a href="#">忘记密码？</a></h3>
                    <button class="login_btn" @click="handleLogin">进入</button>
                </div>
            </el-form>
            <!-- <input class="login_btn" @click="handleLogin" value="进入"> -->
            <!-- <el-button class="login_btn" type="primary" @click="handleLogin">登录</el-button> -->
        </div>
    </div>
</template>
<script>
import { reactive, toRefs } from 'vue'
import { useStore } from "vuex"
import { useRouter } from "vue-router"

export default {
    name: "login",
    setup() {
        const store = useStore()
        const router = useRouter()
        const data = reactive({
            loginData: {
                username: "",
                password: ""
            }
        })
        const handleLogin = () => {
            // 触发跳转
            store.commit('setUserInfo', data.loginData);
            localStorage.setItem("loginData", JSON.stringify(data.loginData))
            // 跳转/user
            router.push({
                path: "/user"
            })
        }
        return {
            ...toRefs(data),
            handleLogin
        }
    }
}
</script>
<style scoped>
h1 {
    font-size: 26px;
    color: #70b4e3;
    font-weight: 400;
    padding-bottom: 10px;
}

h3 {
    text-align: left;
    font-size: 16px;
    font-weight: 400;
    color: #70b4e3;
    padding: 20px 0;
}

.login_wrap {
    width: 100%;
    height: 100vh;
    position: reactive;
    display: flex;
    justify-content: center;
    align-items: center;
    background-image: linear-gradient(to right top, #d16ba5, #c777b9, #ba83ca,
            #aa8fd8, #9a9ae1, #8aa7ec, #79b3f4, #69bff8, #52cffe, #41dfff, #46eefa, #5ffbf1);
}

.form_wrap {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    /* padding: 30px 50px; */

    width: 900px;
    height: 560px;
    display: flex;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 25px 45px rgba(0, 0, 0, 0.3);
}

.demo-dynamic {
    width: 900px;
    height: 560px;
    background: rgba(255, 255, 255, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
}

.demo-dynamic .content {
    width: 70%;
    /* height: 421.2px; */
    display: flex;
    flex-direction: column;
    text-align: center;
}

.first-login {
    text-align: center;
    font-size: 16px;
    font-weight: 400;
    color: #55855a;
    padding: 20px 0;
}

.login_btn {
    width: 100%;
    height: 40px;
    border-radius: 20px;
    border: none;
    color: #fff;
    cursor: pointer;
    margin-top: 50px;
    background-image: linear-gradient(120deg, #76daec, 0%, #c5a8de 100%);
}
</style>